<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页面</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/login.css">
</head>

<body>


  
  <!-- 导航栏 -->
  <div class="nav">
    网页聊天
  </div>
  <!-- 主窗口区 -->
  <div class="login-container">
    <div class="login-dialog">
      <h3>登录</h3>
      <div class="row">
        <!-- row标签用于标识输入框的元素 -->
        <span>用户名</span>
        <input type="text" id="username">
      </div>
      <div class="row">
        <span>密码</span>
        <input type="text" id="password">
      </div>
      <div class="row">
        <button id="submit">登录</button>
      </div>
    </div>
  </div>

<!--  引入 jquery-->
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<!--实现前后端交互逻辑 登录页面-->
  <script>
    let submitButton = document.querySelector('#submit');
    submitButton.onclick = function(){
      //1.先获取到输入框中的内容
      let username = document.querySelector('#username').value;
      let password = document.querySelector('#password').value;
      //验证账号密码的合法性
      if(username == '' || password == ''){
        alert("当前输入的用户名或密码为空!");
        return;
      }

      //2. 再发送 ajax 进行登录
      $.ajax({
        url:'/login',
        type:'post',
        data:{
          username : username,
          password : password
        },
        success: function(body){
          //3.处理响应
          //此处的 body 相当于响应的 user 对象
          if(body && body.userId > 0){//判断body是否是非空对象，id是否>0
            //登陆成功!
            alert("登陆成功!");
            //跳转到客户端主页面(聊天页面)
            //注意!!! 当前尚未创建这个页面 ,运行的时候就会出现404
            location.assign('/client.html');
          }else{
            alert("登录失败!");
          }
        }
      });

    }

  </script>
</body>

</html>